<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/pillar.css" />
		<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
		<script type="text/javascript" src="js/jquery.animate-colors.js" ></script>
		<script type="text/javascript" src="js/pillar-1.0.0.js" ></script>
	</head>
	<style>
	.container{
		width:33%;
		height: 300px;
		border: 0px solid sienna;
		float: left;
	}		
	.content{
		width: 160px;
		height: 100%;
		border: 0px solid goldenrod;
		float: left;
	}
	.horizontal_content{
		width: 300px;
		height: 33%;
		border:0px solid goldenrod;
	}
	.ellipse_content{
		width:200px;
		height: 33%;
		border:0px solid goldenrod;
	}
	</style>
	<body>
		<input  type="button" value="reset" onclick="reset();"/><hr />
		<div style="width:1500px;">
			
			<div class="container">
				<div class="content" id="c1"></div>	
				<div class="content" id="c2"></div>	
				<div class="content" id="c3"></div>	
			</div>
			<div class="container">
				<div class="horizontal_content" id="a1"></div>
				<div class="horizontal_content" id="a2"></div>
				<div class="horizontal_content" id="a3"></div>
			</div>
			<div class="container">
				<div class="ellipse_content" id="b1"></div>
				<div class="ellipse_content" id="b2"></div>
				<div class="ellipse_content" id="b3"></div>
			</div>
			
		</div>
		
	</body>
	<script type="text/javascript">
	var c1 = new Pillar({
		id: 'c1',
		title: 'Total CUP Used',
		max: 100,
		min: 0,
		type: 'vertical'
	});
	c1.start().setValue(50);
	
	var c2 = new Pillar({
		id: 'c2',
		title: 'Total CUP Used',
		max: 65535,
		min: 0,
		type: 'vertical'
	});
	c2.start().setValue(33333);
	
	var c3 = new Pillar({
		id: 'c3',
		title: 'Total CUP Used',
		max: 1000,
		min: 200,
		type: 'vertical'
	});
	c3.start().setValue(1000);
	
	var a1 = new Pillar({
		id: 'a1',
		title: 'I/O Used',
		max: 1000,
		min: 200,
		type: 'horizontal'
	});
	a1.start().setValue(1000);
	
	var a2 = new Pillar({
		id: 'a2',
		title: 'I/O Used',
		max: 3000,
		min: 1000,
		type: 'horizontal'
	});
	a2.start().setValue(2000);
	
	var a3 = new Pillar({
		id: 'a3',
		title: 'I/O Used',
		max: 100,
		min: 0,
		type: 'horizontal'
	});
	a3.start().setValue(25);
	
	var b1 = new Pillar({
		id: 'b1',
		title: 'I/O Used',
		max: 100,
		min: 0,
		type: 'ellipse'
	});
	b1.start().setValue(25);
	
	var b2 = new Pillar({
		id: 'b2',
		title: 'I/O Used',
		max: 100,
		min: 0,
		type: 'ellipse'
	});
	b2.start().setValue(25);
	
	var b3 = new Pillar({
		id: 'b3',
		title: 'I/O Used',
		max: 100,
		min: 0,
		type: 'ellipse'
	});
	b3.start().setValue(25);
	
	function reset(){
		c1.setValue(parseInt(Math.random() * 100));
		c2.setValue(parseInt(Math.random() * 65535));
		c3.setValue(parseInt(Math.random() * 1000));
		a1.setValue(parseInt(Math.random() * 1000));
		a2.setValue(parseInt(Math.random() * 3000));
		a3.setValue(parseInt(Math.random() * 100));
		b1.setValue(parseInt(Math.random() * 100));
		b2.setValue(parseInt(Math.random() * 100));
		b3.setValue(parseInt(Math.random() * 100));
	}
	
	setInterval(function(){
		reset();
	},1500)
	</script>
</html>
